<template>
	<view class="ecology-protect-page">
		<!-- 一、生物多样性保护 -->
		<view class="section">
			<view class="section-title">
				<text class="dot">1、</text>生物多样性保护
			</view>

			<!-- 1. 智能监测技术 -->
			<view class="sub-section">
				<view class="sub-title">1. 智能监测技术</view>
				<view class="item flex items-start">
					<text class="label mr-2">● AI+红外相机：</text>
					<text class="flex-1">自动识别野生动物种类、数量（如云南大象北迁实时监测）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2"> </text>
					<text class="flex-1">案例：WWF与微软合作的 "PAWS" 系统，通过AI分析盗猎活动轨迹。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 声纹识别：</text>
					<text class="flex-1">通过动物叫声监测种群分布（如亚马逊雨林生物声学监测网络）。</text>
				</view>
			</view>

			<!-- 2. 基因技术 -->
			<view class="sub-section">
				<view class="sub-title">2. 基因技术</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 濒危物种基因库：</text>
					<text class="flex-1">冷冻保存细胞和DNA（如挪威 "末日种子库" 保存10万+物种基因）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 基因复活：</text>
					<text class="flex-1">通过CRISPR技术尝试复活部分灭绝物种（如旅鸽复活计划）。</text>
				</view>
			</view>

			<!-- 3. 栖息地修复 -->
			<view class="sub-section">
				<view class="sub-title">3. 栖息地修复</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 无人机植树：</text>
					<text class="flex-1">英国 "Droneseed" 无人机1天可种10万棵树，效率是人工的150倍。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 珊瑚3D打印：</text>
					<text class="flex-1">中东用3D打印珊瑚礁促进海洋生态恢复。</text>
				</view>
			</view>
		</view>

		<!-- 二、环境污染治理 -->
		<view class="section">
			<view class="section-title">
				<text class="dot">2、</text>环境污染治理
			</view>

			<!-- 1. 大气治理 -->
			<view class="sub-section">
				<view class="sub-title">1. 大气治理</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 卫星遥感监测：</text>
					<text class="flex-1">中国 "碳卫星" 全球追踪CO₂排放源。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 智能除尘：</text>
					<text class="flex-1">电厂安装AI控制的静电除尘系统，效率达99.9%。</text>
				</view>
			</view>

			<!-- 2. 水生态保护 -->
			<view class="sub-section">
				<view class="sub-title">2. 水生态保护</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 无人船清理：</text>
					<text class="flex-1">荷兰 "Interceptor" 太阳能无人船自动收集河流塑料垃圾。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 微生物净水：</text>
					<text class="flex-1">美国 "BioGill" 生物反应器用微生物分解污水中有机物。</text>
				</view>
			</view>

			<!-- 3. 土壤修复 -->
			<view class="sub-section">
				<view class="sub-title">3. 土壤修复</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 植物修复：</text>
					<text class="flex-1">种植超富集植物吸收重金属（如蜈蚣草修复砷污染土壤）。</text>
				</view>
				<view class="item flex items-start">
					<text class="label mr-2">● 纳米材料吸附：</text>
					<text class="flex-1">石墨烯海绵可高效吸附土壤中的石油污染物。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// const pageLoaded = ref(false)

	// onMounted(() => {
	// 	pageLoaded.value = true
	// })
</script>

<style scoped>
	/* 基础样式 */
	.ecology-protect-page {
		padding: 30rpx;
		min-height: 100vh;
		background-image: url('@/static/images/knowledge-bg1.jpg');
		background-attachment: fixed; /* 固定背景图，内容滚动时背景不动 */
		background-repeat: no-repeat; /* 防止背景图重复 */
		background-position: center;
		background-size: 100% 100%; 
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		text-align: center;
		color: #000;
	}

	.arrow-left {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
	}

	.section {
		margin-bottom: 50rpx;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		color: #000;
	}

	.dot {
		width: 36rpx;
		height: 36rpx;
		background-color: #000;
		color: white;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
		margin-right: 15rpx;
		font-size: 28rpx;
	}

	.sub-section {
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}

	.sub-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #404040;
	}

	.item {
		margin-bottom: 15rpx;
		line-height: 1.8;
	}

	.label {
		font-weight: bold;
		min-width: 120rpx;
		display: inline-block;
		color: #000;
	}

	/* 动画效果 */
	.fade-in {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>